<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常规选项 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
</head>
<body class="sidebar-mini layout-fixed layout-navbar-fixed text-md <!--sidebar-collapse-->">
    <div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <#include "/admin/inc/header.html">
    </nav>
    <aside class="main-sidebar sidebar-dark-primary ">
        <#include "/admin/inc/aside.html">
    </aside>
    <div class="content-wrapper bg-gray-custom">
        <div class="content-header pb-0">
            <div class="row mb-2">
                <div class="col-12">
                    <h4 class="ml-2 mb-0 text-dark">常规选项</h4>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row text-sm mt-4">
                    <div class="col-12">
                        <form id="general-form">
                            <div class="form-group row mb-4">
                                <label for="title" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点标题</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input type="text" name="title" value="${(general['title'].value)!''}" class="form-control-sm form-control" id="title" autocomplete="off">
                                    <p class="text-sm text-secondary mt-1">请填写站点的名字</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="description" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点标语</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <textarea name="description" id="description" rows="3" class="form-control-sm form-control no-resize" >${(general['description'].value)!''}</textarea>
                                    <p class="text-sm text-secondary mt-1">请用一句简短的话概括您的站点。站点描述语最好控制在80个字符以内，有利于搜索引擎对站点进行收录。</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="logo" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点logo</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <#if (general['logo'].value)?? && (general['logo'].value) != "">
                                        <img src="${(general['logo'].value)}" style="width: 80px;border-radius: 4px" class="img-fluid mb-2 mr-1 img-logo" alt="logo">
                                    <#else>
                                        <img src="${una}/ub-admin/img/logo-gray.svg" style="width: 80px;border-radius: 4px" class="img-fluid mb-2 mr-1 img-logo" alt="logo">
                                    </#if>
                                    <input type="hidden" name="logo" id="logo" value="${(general['logo'].value)!''}">
                                    <input type="file" id="logo-file" onchange="selectFile(this,'logo')" style="display: none;" accept="image/*">
                                    <div class="btn-group">
                                        <button type="button" onclick="document.getElementById('logo-file').click()" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> 上传</button>
                                        <button type="button" onclick="undo(this,'logo')" aria-url="${(general['logo'].value)!una+'/ub-admin/img/logo-gray.svg'}" class="btn btn-sm btn-default"><i class="fa fa-undo"></i> 撤销</button>
                                    </div>
                                    <p class="text-sm text-secondary mt-1">使用logo图案，将提升您站点的辨识度，更容易被人记住</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="favicon" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">favicon</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <#if (general['favicon'].value)?? && (general['favicon'].value) != "">
                                        <img src="${(general['favicon'].value)}" style="width: 40px;border-radius: 4px" class="img-fluid mb-2 mr-1 img-favicon" alt="favicon">
                                    <#else>
                                        <img src="${una}/ub-admin/img/logo-gray.svg" style="width: 40px;border-radius: 4px" class="img-fluid mb-2 mr-1 img-favicon" alt="favicon">
                                    </#if>

                                    <input type="hidden" name="favicon" id="favicon" value="${(general['favicon'].value)!''}">
                                    <input type="file" id="favicon-file" onchange="selectFile(this,'favicon')" style="display: none;" accept="image/*">
                                    <div class="btn-group">
                                        <button onclick="document.getElementById('favicon-file').click();" type="button" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> 上传</button>
                                        <button type="button" onclick="undo(this,'favicon')" aria-url="${(general['favicon'].value)!una+'/ub-admin/img/logo-gray.svg'}" class="btn btn-sm btn-default"><i class="fa fa-undo"></i> 撤销</button>
                                    </div>
                                    <p class="text-sm text-secondary mt-1">请设置网页标题小图标，建议使用分辨率大小为32x32的图片</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="copyright" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点外观</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <select class="form-control form-control-sm" name="theme" style="width: 120px">
                                        <#if themes?? && themes?size gt 0>
                                            <#list themes as theme>
                                                <#if (general['theme'].value)?? && (general['theme'].value) == theme>
                                                    <#if theme == "default">
                                                        <option value="${theme}" selected>默认外观</option>
                                                    <#else>
                                                        <option value="${theme}" selected>${theme}</option>
                                                    </#if>
                                                <#else>
                                                    <option value="${theme}">${theme}</option>
                                                </#if>
                                            </#list>
                                        <#else>
                                            <option value="default" selected>默认外观</option>
                                        </#if>
                                    </select>
                                    <p class="text-sm text-secondary mt-1">请设置网站的主题，若未设置，系统将使用内置的默认主题对站点进行渲染</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">写作风格</label>
                                <div class="col-lg-3 col-md-4 col-sm-5 pt-2">
                                    <#if (general['editor'].value)?? && (general['editor'].value) != "">
                                        <div class="custom-control custom-radio custom-control-inline pr-4">
                                            <input type="radio" id="markdown-edit" name="editor" value="0" <#if (general['editor'].value)?? && (general['editor'].value) == "0">checked</#if> class="custom-control-input">
                                            <label class="custom-control-label font-weight-normal" for="markdown-edit">Markdown风格</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="ck-editor" name="editor" value="1" <#if (general['editor'].value)?? && (general['editor'].value) == "1">checked</#if> class="custom-control-input">
                                            <label class="custom-control-label font-weight-normal" for="ck-editor">Office风格</label>
                                        </div>
                                    <#else>
                                        <div class="custom-control custom-radio custom-control-inline pr-4">
                                            <input type="radio" id="markdown-edit" name="editor" value="0" checked class="custom-control-input">
                                            <label class="custom-control-label font-weight-normal" for="markdown-edit">Markdown风格</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="ck-editor" name="editor" value="1" class="custom-control-input">
                                            <label class="custom-control-label font-weight-normal" for="ck-editor">Office风格</label>
                                        </div>
                                    </#if>
                                    <p class="text-sm text-secondary mt-1">不同的风格将使用不同的编辑器撰写文章</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="keywords" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点关键词</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input type="text" name="keywords" value="${(general['keywords'].value)!''}" class="form-control-sm form-control" id="keywords" autocomplete="off">
                                    <p class="text-sm text-secondary mt-1">设置站点关键词，更利于搜索引擎收录站点。建议使用3-5个关键词，每个关键词之间使用逗号（,）分割。</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="domain" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点域名</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input type="text" name="domain" value="${(general['domain'].value)!''}" class="form-control-sm form-control" id="domain" autocomplete="off">
                                    <p class="text-sm text-secondary mt-1">请填写已通过备案的站点域名</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="icp" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">ICP备案号</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input type="text" name="icp" value="${(general['icp'].value)!''}" class="form-control-sm form-control" id="icp" autocomplete="off">
                                    <p class="text-sm text-secondary mt-1">请填写工信部域名备案号</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="isp" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">联网备案号</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input type="text" name="isp" value="${(general['isp'].value)!''}" class="form-control-sm form-control" id="isp" autocomplete="off">
                                    <p class="text-sm text-secondary mt-1">请填写全国互联网安全备案号(无此项可不填写)</p>
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="email" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">站点邮箱</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input type="text" name="email" value="${(general['email'].value)!''}" class="form-control-sm form-control" id="email" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group row mb-4">
                                <label for="copyright" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">版权标语</label>
                                <div class="col-lg-3 col-md-4 col-sm-5">
                                    <input class="form-control-sm form-control no-resize" value="${(general['copyright'].value)!''}" name="copyright" id="copyright">
                                    <p class="text-sm text-secondary mt-1">该标语将会在网站前端页面显示，例如 &copy; 2020-unaboot</p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-5 text-right">
                                    <button type="button" id="general-btn" class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="main-footer">
        <#include "/admin/inc/footer.html">
    </footer>
</div>
    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.js"></script>
    <script src="${una}/ub-admin/js/jquery.validate.min.js"></script>
    <script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
    <script type="text/javascript">
        var form = $("#general-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) {
                element.after(error);
            },
            rules:{
                title:{
                    required:true,
                    maxlength:30
                },
                domain:{
                    required:true,
                    url:true
                },
                description:{
                    maxlength:80
                },
                keywords:{
                    maxlength:50
                },
                icp:{
                    required:true
                },
                copyright:{
                    required:true
                },
                logo:{
                    required:true
                },
                favicon:{
                    required:true
                },
                theme:{
                    required:true
                }
            },
            messages:{
                title:{
                    required:'请给您的站点取一个名字',
                    maxlength:'站点名字不能超过30个字符'
                },
                domain:{
                    required:'请填写您网站的域名',
                    url:'请输入合法的域名地址'
                },
                description:{
                    maxlength:'网站描述最多不能超过80个字符'
                },
                keywords:{
                    maxlength:'网站关键词长度最长不能超过50个字符'
                },
                icp:{
                    required:'请填写您的网站备案号'
                },
                copyright:{
                    required:'请填写您的网站版权标识'
                },
                logo:{
                    required:'请上传您网站的logo图标'
                },
                favicon:{
                    required:'请上传网站网页小图标'
                },
                theme:{
                    required:'请选择一个默认的站点外观'
                }
            }
        });
        $("#general-btn").on("click",function(){
           var isOk = form.valid();
           if(isOk){
               var data = $("#general-form").serialize();
               layer.alert("您确定对表单数据进行修改吗？",{
                   title:"<i class='fa fa-info-circle'></i> 提示",
                   icon:0,
                   btn:['是(Y)','否(N)'],
                   shadeClose: false,
                   shade:[0.4,'#fff'],
                   anim: 1
               },function(){
                   var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
                   $.ajax({
                       type:'POST',
                       url:"${una}/admin/settings/update",
                       data:data,
                       success:function(){
                           layer.close(load);
                           layer.alert("当前操作已成功执行!",{
                               title:"<i class='fa fa-info'></i> 提示",
                               icon:1,
                               shade:[0.4,"#fff"],
                               shadeClose:false,
                               time:0,
                               btn:['OK'],
                               yes:function(index){
                                   layer.close(index);
                                   window.location.reload();
                               }
                           });
                       },
                       error:function(){
                           layer.close(load);
                           layer.alert("当前操作失败!请稍后再试。",{
                               title:"<i class='fa fa-info'></i> 提示",
                               icon:1,
                               shade:[0.4,"#fff"],
                               shadeClose:false,
                               time:0,
                               btn:['Close'],
                               yes:function(newIndex){
                                   layer.close(newIndex);
                               }
                           });
                       }
                   });
               },function(index){
                   layer.close(index);
               });
           }else{
               return false;
           }
        });

        function selectFile(element,selector){
            try {
                var file = element.files[0];
                var reader = new FileReader();
                reader.onload = function(){
                    var image = new Image();
                    image.src = reader.result;
                    image.onload = function(){
                        var w = image.width,h = image.height;
                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        $(canvas).attr({width:w,height:h});
                        context.drawImage(image,0,0,w,h);
                        var base64 = canvas.toDataURL("image/png",0.5);
                        var result = {
                            url:window.URL.createObjectURL(file),
                            base64:base64,
                            clearBase64:base64.substr(base64.indexOf(',')+1),
                            suffix:base64.substring(base64.indexOf(',')+1,base64.indexOf(';'))
                        };
                        $("input[id="+selector+"]").val(result.base64);
                        $("img.img-"+selector).attr("src",result.base64);
                    }
                };
                reader.readAsDataURL(element.files[0]);
            }catch (e) {
                layer.alert("文件解析异常");
            }
        }
        function undo(element,selector){
            var imgSrc = $(element).attr("aria-url");
            $("input[id="+selector+"]").val(imgSrc);
            $("img.img-"+selector).attr("src",imgSrc);
        }
    </script>
</body>
</html>